<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://webapi.amap.com/maps?v=2.0&key=a89eb9f1e8daf3d7bd1c04a1c8debc0c"></script>
	</head>
	<body class="main">
		<!-- 头部 -->
		<div id="header">
			<p>户外跑</p>
			<div>
				<span>运动中 </span>
				<i class="iconfont icon-yinle"></i>
				<i class="iconfont icon-tiaojie"></i>
			</div>
		</div>
		<!-- 里程 -->
		<p id="mileage"><span id="num">99.99</span><span id="km">公里</span></p>

		<!-- 定位 -->
		<div id="gps">
			<p>GPS信号度低,数据精准度低</p>
			<i class="iconfont icon-dizhi"></i>
		</div>
		<!-- 仪表盘-->
		<div id="panel">
			<div>
				<i class="iconfont icon-changyong_shijian"></i>
				配速
				<span id="speed"></span>
			</div>
			<div>
				<i class="iconfont icon-sudu"></i>
				用时
				<span id="time">1</span>
			</div>
			<div>
				<i class="iconfont icon-qialuli"></i>
				千卡
				<span id="calorie">1</span>
			</div>
		</div>
		<!-- 暂停 -->
		<div id="btns">
			<div id="continue">
				<span class="iconfont icon-weibiaoti518"></span>
				<p>继续</p>
			</div>
			<div id="pause">
				<span class="iconfont icon-24gf-pause2"></span>
				<p>暂停</p>
			</div>
			<div id="end">
				<span class="iconfont icon-guanji"></span>
				<p>结束</p>
			</div>
		</div>
	</body>
</html>
